<template>
	<view :class="$attrs">
		<view class="mb-8"><text class="text-bold">{{title}}</text></view>
		<view v-if="formList.length" class="radius-8 bg-default px-12 py-16 mb-20 flex-col">
			<template v-for="(item, i) in formList" :key="i">
				<InputFormItem
					v-if="item.type === 1"
					:key="i+'_input'"
					:class="i>0 ? 'mt-16': ''"
					:sort="i"
					:isLast="i===formList.length-1"
					:disabled="disabled"
					:disabledTip="disabledTip"
					v-model:mustState="item.mustState"
					v-model:title="item.title"
					@onActionClick="onActionClick"
				/>
				<RadioGroupFormItem
					v-else-if="item.type === 2||item.type === 3"
					:key="i+'_radio'"
					:class="i>0 ? 'mt-16': ''"
					:sort="i"
					:isLast="i===formList.length-1"
					:disabled="disabled"
					:disabledTip="disabledTip"
					:type="item.type"
					v-model:mustState="item.mustState"
					v-model:title="item.title"
					v-model:options="item.activeEnrollInfoOptions"
					@onActionClick="onActionClick"
				/>
			</template>
		</view>
		<view v-if="formList.length < maxItemLength && !disabled"  class="flex flex-col uni-bg-white py-12 px-16 c3 fs-12 radius-8">
			<view class="mb-16"><text class="fs-14">请选择以下类型添加标题</text></view>
			<view class="flex justify-around">
				<view class="flex flex-col item-center"  @click="toAddFormItem(1)">
					<image class="w-24 h-24 mb-4" src="@/pagesB/static/activity/icon-add.svg"></image>
					<text>填写项</text>
				</view>
				<view class="flex flex-col item-center"  @click="toAddFormItem(2)">
					<image class="w-24 h-24 mb-4" src="@/pagesB/static/activity/icon-radio.svg"></image>
					<text>单选</text>
				</view>
				<view class="flex flex-col item-center"  @click="toAddFormItem(3)">
					<image class="w-24 h-24 mb-4" src="@/pagesB/static/activity/icon-check.svg"></image>
					<text>多选</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, unref, toRaw, watch } from 'vue'
	import InputFormItem from './input-form-item.vue'
	import RadioGroupFormItem from './radio-group-form-item.vue'
	
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		modelValue: {
			type: Array
		},
		// 报名信息最多添加6个
		// 单选内容最少2个，最多10个；（超过2个时，选项后显示删除按钮
		maxItemLength: {
			type: Number,
			default: 10
		},
		disabled: {
			type: Boolean,
			default: false
		},
		disabledTip: {
			type: String,
			default: '活动进行中，无法修改'
		}
	})
	
	const emits = defineEmits(['update:modelValue'])
	
	const addType = ref(0)
	const showTooltip = ref(false)
	
	const formList = ref(props.modelValue)
	
	const addFieldInput = () => {
		formList.value.push({
			type: 1,
			title: '',
			mustState: 2, // 是否必填（1-否，2-是）
		})
		emits('update:modelValue', unref(formList))
	}
	
	const addRadioField = (type) => {
		formList.value.push({
			type: type,
			title: '',
			mustState: 2, // 是否必填（1-否，2-是）
			activeEnrollInfoOptions: [
				{
					checkState: 1, // 勾选状态：1-未勾选，2-已勾选，用户勾选
					optionText: '',
					// optionNum: 1,
				},
				{
					checkState: 1, // 勾选状态：1-未勾选，2-已勾选，用户勾选
					optionText: '',
					// optionNum: 2,
				}
			]
		})
		emits('update:modelValue', unref(formList))
	}
	
	const toShowPopup = () => {
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		showTooltip.value = true
	}
	
	const toAddFormItem = (type) => {
		if (type === 1) {
			addFieldInput()
		} else if (type === 2) {
			addRadioField(type)
		} else if (type === 3) {
			addRadioField(type)
		}
		showTooltip.value = false
	}
	
	const onActionClick = (action, data, index) => {
		console.log('onActionClick', action, data, index, props.modelValue, formList.value)
		if (props.disabled) {
			uni.showToast({
				title: props.disabledTip,
				icon: 'none'
			})
			return
		}
		switch (action){
			case 'del':
				formList.value.splice(index, 1)
				break
			case 'up':
				const prev = formList.value[index-1]
				formList.value[index-1] = formList.value[index]
				formList.value[index] = prev
				break
			case 'down':
				const next = formList.value[index+1]
				formList.value[index+1] = formList.value[index]
				formList.value[index] = next
				break
			case 'top':
				const item = formList.value.splice(index, 1)
				formList.value.unshift(unref(item[0]))
				break
		}
		emits('update:modelValue', unref(formList))
	}
</script>

<style lang="scss" scoped>
	.tooltip-popup {
		position: relative;
		background: url('@/static/svg/publish/bg-tooltip.svg') no-repeat;
		background-size: 100%;
		height: 113px;
		width: 162px;
		padding-top: 14px;
		padding-left: 12px;
		padding-bottom: 8px;
	}
</style>